<template>
  <PageLayout page-style="background: #f3f7f8; paddding: 16rpx;">
    <div class="preview-content">
      <div class="wrap-content">
        <u-upload ref="uUploadRef"  :action="action" :file-list="fileList" :width="128" :height="128"></u-upload>
      </div>

      <div style="border-top: 1px solid #e4e4e4"></div>
      <u-form ref="uFormRef" :label-width="'auto'" :model="form">
        <u-form-item label="设计名称：">
          <u-input v-model="form.storeName" />
        </u-form-item>
        <div style="background: #f3f7f8; border-radius: 16rpx 16rpx 16rpx 16rpx; padding: 24rpx">
          <u-form-item :border-bottom="false">
            <u-input v-model="form.storeInfo" placeholder="添加作品描述..." type="textarea" />
          </u-form-item>
          <u-form-item :border-bottom="false">
            <div class="keyword-label"># 关键词</div>
            <div class="keyword-ul">
              <div v-for="(item, index) in keywordList" :key="index" class="keyword-li">
                <div :class="{ active: form.productKeywords?.includes(item) }" class="keyword-tag" @click="bindKeyword(item)">{{ item }}</div>
              </div>
            </div>
          </u-form-item>
        </div>
        <u-form-item label="作品价格" :border-bottom="false">
          <div style="display: flex; align-items: center; justify-content: flex-end; gap: 20rpx">
            <u-number-box v-model="form.price" :positive-integer="false" style="margin-left: auto"></u-number-box>
            元
          </div>
        </u-form-item>
      </u-form>
    </div>
    <div style="width: 1rpx; height: 300rpx"></div>
    <div class="btns">
      <div class="btn" @click="bindModalSuccess()">取消</div>
      <div class="btn is-success" @click="bindSave">上架</div>
    </div>
  </PageLayout>
</template>

<script lang="ts" setup>
import { ref, shallowRef, toRaw } from 'vue';
import PageLayout from '@/components/PageLayout.vue';
import { getProductsDesignInfo, goodsUpdateOnline } from '@/api/designUser';
import { getSearchKeyword } from '@/api/store';
import { onLoad } from '@dcloudio/uni-app';
import { useRouter } from 'uni-mini-router';
const router = useRouter();
const uUploadRef = shallowRef()

const action = ref(import.meta.env.VITE_BASE_URL + '/api/upload');
const fileList = ref([]);
const form = ref({
  id: '',
  image: '',
  storeName: '',
  storeInfo: '',
  keyword: '',
  price: '',
  productKeywords: [],
});

const bindKeyword = (item) => {
  if (form.value.productKeywords?.includes(item)) {
    form.value.productKeywords = form.value.productKeywords.filter((i) => i !== item);
  } else {
    form.value.productKeywords.push(item);
  }
};

const bindSave = () => {
  let files = []
  // 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
  files = uUploadRef.value?.lists.map((val: any) => {
    return val.response?.link ? val.response.link : val.url
  })
  // 如果您不需要进行太多的处理，直接如下即可
  // files = uUploadRef.value?.lists
  console.log('保存', fileList.value, files);
  const data = {
    ...form.value,
    image: files?.join(','),
    keyword: form.value.productKeywords?.join(','),
    isShow: 1,
    status: 1
  };
  goodsUpdateOnline(data).then((res) => {
    console.log(res);
    uni.showToast({
      title: '上架成功',
      icon: 'success',
    });
    router.replace({
      path: '/subPage/design/me/me',
    })
    show.value = false;
  });
};

const show = ref(true);
const open = async () => {
  // console.log('预览', useDesignerGood.towardPositionArr);
  await uni.showLoading({ title: '加载中...' });
  const arr = [];
  for (let i = 0; i < useDesignerGood.towardPositionArr.length; i++) {
    const item = toRaw(useDesignerGood.towardPositionArr)[i];
    arr.push({
      url: await item.AICanvas?.toImageData(),
      title: item.name,
    });
  }
  console.log({ arr });
  list.value = arr;
  uni.hideLoading();
  show.value = true;
};
const bindClose = () => {
  show.value = false;
};

const keywordList = shallowRef([]);
function initKeyword() {
  getSearchKeyword().then((res) => {
    console.log('res', res);
    keywordList.value = res.data;
  });
}
initKeyword();

onLoad((option) => {
  getProductsDesignInfo({ productId: option.id }).then((res) => {
    fileList.value = res.data.productInfo?.sliderImage?.split(',').map((item) => {
      return {
        url: item,
      };
    });
    // keywordList.value = res.data.productInfo?.keyword?.split(',');
    const designInfo = {
      status: 1,
      id: res.data.productInfo?.id,
      image: '',
      storeName: res.data.productInfo?.storeName,
      storeInfo: res.data.productInfo?.storeInfo,
      keyword: '',
      price: res.data.productInfo?.price,
      productKeywords: res.data.productInfo?.keyword?.split(','),
    };
    form.value = designInfo;
  });
});

const bindModalSuccess = () => {
  router.back({
    delta: 1,
  });
};
</script>
<style lang="scss" scoped>
.preview-content {
  background: #ffffff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 16rpx;
  box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.08);
  margin: 16rpx;
  .title {
    width: 132rpx;
    height: 42rpx;
    font-weight: bold;
    font-size: 32rpx;
    color: #222222;
    line-height: 42rpx;
    text-align: center;
    margin: 0 auto;
  }

  .wrap-content {
    padding: 24rpx 16rpx 48rpx;
  }


}
.btns {
  width: 100vw;
  position: fixed;
  bottom: 0px;
  left: 0;
  height: 168rpx;
  background: #ffffff;
  box-shadow: 0rpx -2rpx 4rpx 2rpx rgba(9, 9, 9, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16rpx;
  padding: 0 32rpx;

  .btn {
    width: 240rpx;
    height: 72rpx;
    background: #f3f7f8;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #6f6f6f;
    line-height: 72rpx;
    text-align: center;

    &.is-success {
      width: 430rpx;
      background: linear-gradient(90deg, #f32f1a 0%, #f68a2d 100%);
      color: #ffffff;
    }
  }
}
.wrap {
  padding: 40rpx;
  background: red;
}

.keyword-label {
  width: 144rpx;
  height: 54rpx;
  font-weight: 400;
  font-size: 28rpx;
  color: #222222;
  line-height: 54rpx;
  padding: 0 16rpx;
  background: #ffffff;
  border-radius: 28rpx 28rpx 28rpx 28rpx;
  margin-bottom: 16rpx;
}

.keyword-ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16rpx;

  .keyword-li {
    .keyword-tag {
      height: 54rpx;
      font-size: 28rpx;
      color: #666666;
      line-height: 54rpx;
      text-align: center;
      padding: 0 16rpx;
      background: #ffffff;
      border-radius: 28rpx 28rpx 28rpx 28rpx;

      &.active {
        color: #ffffff;
        background: linear-gradient(90deg, #f32f1a 0%, #f68a2d 100%);
      }
    }
  }
}
</style>
<style scoped></style>
